<script setup>
import { onMounted, reactive, ref } from 'vue';
import { delActivityApi, getActivityListApi } from '../../../api/activity';
import { useBuildAllList, useActivityStatus } from '../../../hooks/lq_index';
import addForm from './addForm.vue';
// import ImagePreview from '@/components/ImagePreview'
import { ElMessage } from 'element-plus';
import TableList from '@/components/TableList/index.vue'
//=================
const buildList = useBuildAllList()
const statusList = useActivityStatus()
// console.log(statusList);

// 表格区域数组
const columns = [
  {
    label: 'ID',
    prop: 'id',
  },
  {
    label: '小区名称',
    prop: 'community',
    type: 'position'
  },
  {
    label: '活动主题',
    prop: 'title',
  },
  {
    label: '活动地点',
    prop: 'place',
  },
  {
    label: '照片',
    prop: 'photo',
    type: 'picture'
  },
  {
    label: '举办单位',
    prop: 'sponsor_unit',
  },
  {
    label: '状态',
    prop: 'status',
  },
  {
    label: '活动开始时间',
    prop: 'begin_time',
    type: 'time'
  },
  {
    label: '活动结束时间',
    prop: 'end_time',
    type: 'time'
  },
  {
    label: '创建时间',
    prop: 'create_time',
    type: 'time'
  },
  {
    label: '操作',
    type: 'action'
  }
]

// 列表功能===============
const queryData = reactive({
  current: 1,
  pageSize: 10,
  create_time: '',
  community_code: '',
  title: ''
})
const total = ref(0)
const list = ref([])
const initData = async () => {
  let { data } = await getActivityListApi(queryData)
  console.log(data);
  list.value = data.rows
  total.value = data.count
}


// 处理时间
const timeArr = ref([]);
watch(timeArr, (val) => {
  console.log(timeArr.value);
  if (timeArr.value) {
    queryData.create_time = val
      .map((item) => {
        item = +new Date(item);
        return item;
      })
      .join(",");
    console.log(queryData.create_time);
  } else {
    queryData.create_time = "";
  }
});

// 显示状态文字
const showStatus = (val) => {
  let res = statusList.find(item => item.value === val * 1)
  return res ? res.label : '未知'
}
// 每页数量切换
const sizeChange = (val) => {
  queryData.current = val
  initData()
}
// 页码切换
const currentChange = (val) => {
  queryData.pageSize = val
  initData()
}
// 搜索确定
const onSearch = () => {
  queryData.current = 1
  initData()
}
// 重置
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 10,
    create_time: '',
    community_code: '',
    title: ''
  })
  timeArr.value = []
  initData()
}
// 回显处理
const editRow = id => {
  addRef.value.replyData(id)
}

// 删除事件
const delRow = async (id) => {
  //   await ElMessageBox.confirm(
  //   '确定要删除吗',
  //   '提示',
  //   {
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   },
  // )
  await delActivityApi(id)
  ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--

  initData()
}
// 图片变量
const imgUrl = import.meta.env.VITE_APP_BASE_IMG
//============
onMounted(() => {
  initData()
})

// 新增功能
const addRef = ref()

</script>
<template>
  <div class="app-container">
    <span style="font-weight: 700;">活动管理</span> <span>用于管理小区里不定期举办的各种活动</span>
    <hr>
    <el-card>
      <!-- 搜索区域 -->
      <el-form label-width="80px" label-position="top" :inline="true">
        <el-form-item label="小区名称">
          <el-select clearable v-model="queryData.community_code" placeholder="请选择">
            <el-option v-for="item  in buildList" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动主题">
          <el-input clearable v-model="queryData.title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryData.status">
            <el-option v-for="(item, index)  in  statusList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker clearable v-model="timeArr" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="display: flex;align-items:end">
          <div></div>
          <div>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <hr>
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.isShow = true" size="default">新增活动</el-button>
          <el-icon style="margin-left: 10px;">
            <RefreshRight />
          </el-icon>
          <el-icon style="margin-left: 10px;">
            <Share />
          </el-icon>
          <el-icon style="margin-left: 10px;">
            <Setting />
          </el-icon>
        </div>
      </el-row>
      <hr>
      <!-- 表格区域 -->
      <!-- <el-table :data="list" border stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="community.name" label="小区名称"></el-table-column>
        <el-table-column prop="title" label="活动主题"></el-table-column>
        <el-table-column prop="place" label="活动地点"></el-table-column>
        <el-table-column prop="photo" label="照片">
          <template #default="{ row }">
            <ImagePreview :src="`${imgUrl}${row.photo}`" style="max-width: 80px;" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="sponsor_unit" label="举办单位"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            {{ showStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="begin_time" label="活动开始时间"></el-table-column>
        <el-table-column prop="end_time" label="活动截止时间"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" size="default" @click="editRow(row.id)">编辑</el-button>
            <el-button type="text" @click="delRow(row.id)" size="default">删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->

      <TableList :list="list" :columns="columns" @handleDel="delRow($event)" @handleEdit="editRow($event)">
        <template #otherType="{ row, data }">
          <template v-if="data === 'status'">
            {{ showStatus(row[data]) }}
          </template>
        </template>
      </TableList>>
      <!-- 分页区域 -->
      <el-pagination @size-change="currentChange" @current-change="sizeChange" v-model:current-page="queryData.current"
        :page-sizes="[10, 20, 30, 40]" v-model:page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
      <!-- 新增修改组件 -->
      <addForm ref="addRef" @updateList="initData" />
    </el-card>
  </div>
</template>
<style scoped></style>